<template>
    <div class="chart-box">
        <div ref="chart1"></div>
        <div ref="chart2"></div>
        <div ref="chart3"></div>
        <div ref="chart4"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
    name: "LeftModule",
    data() {
        return {
        }
    },
    mounted() {

        const chart1 = echarts.init(this.$refs.chart1)
        const chart2 = echarts.init(this.$refs.chart2)
        const chart3 = echarts.init(this.$refs.chart3)
        const chart4 = echarts.init(this.$refs.chart4)
        this.getOption(25, chart1, '今日庭审')
        this.getOption(30, chart2, '今日已开庭')
        this.getOption(40, chart3, '正在开庭')
        this.getOption(55, chart4, '待开庭')

    },
    methods: {
        getOption(dataValue = 25, chart, title) {
            let angle = 0; // 角度

            let option = {
                title: {
                    text: `{v|${dataValue}}{unit|}\n{t|${title}}`,
                    x: "center",
                    y: "center",
                    textStyle: {
                        rich: {
                            v: { fontSize: 25, color: "#fff" },
                            unit: { fontSize: 16, color: "#28edf2" },
                            t: { fontSize: 16, color: "#28edf2" },
                        },
                    },
                },
                series: [
                    /** 绘制内部圆弧-1 <right-top> */
                    {
                        type: "custom",
                        coordinateSystem: "none",
                        renderItem: (params, api) => {
                            return {
                                type: "arc",
                                shape: {
                                    cx: api.getWidth() / 2,
                                    cy: api.getHeight() / 2,
                                    r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
                                    startAngle: ((270 + angle) * Math.PI) / 180,
                                    endAngle: ((360 + angle) * Math.PI) / 180,
                                },
                                style: {
                                    fill: "transparent",
                                    stroke: "rgb(1, 185, 250)",
                                    lineWidth: 2,
                                },
                                silent: true,
                            };
                        },
                        data: [0],
                    },
                    /** 绘制内部圆弧-2 <left-bottom> */
                    {
                        type: "custom",
                        coordinateSystem: "none",
                        renderItem: (params, api) => {
                            return {
                                type: "arc",
                                shape: {
                                    cx: api.getWidth() / 2,
                                    cy: api.getHeight() / 2,
                                    r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.75,
                                    startAngle: ((90 + angle) * Math.PI) / 180,
                                    endAngle: ((180 + angle) * Math.PI) / 180,
                                },
                                style: {
                                    fill: "transparent",
                                    stroke: "rgb(1, 185, 250)",
                                    lineWidth: 2,
                                },
                                silent: true,
                            };
                        },
                        data: [0],
                    },
                    /** 绘制外部圆弧-1 <right-bottom> */
                    {
                        type: "custom",
                        coordinateSystem: "none",
                        renderItem: (params, api) => {
                            return {
                                type: "arc",
                                shape: {
                                    cx: api.getWidth() / 2,
                                    cy: api.getHeight() / 2,
                                    r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.82,
                                    startAngle: ((355 + -angle) * Math.PI) / 180,
                                    endAngle: ((120 + -angle) * Math.PI) / 180,
                                },
                                style: {
                                    fill: "transparent",
                                    stroke: "rgb(1, 185, 250)",
                                    lineWidth: 2.6,
                                },
                                silent: true,
                            };
                        },
                        data: [0],
                    },
                    /** 绘制外部圆弧-2 <left-top> */
                    {
                        type: "custom",
                        coordinateSystem: "none",
                        renderItem: (params, api) => {
                            return {
                                type: "arc",
                                shape: {
                                    cx: api.getWidth() / 2,
                                    cy: api.getHeight() / 2,
                                    r: (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.82,
                                    startAngle: ((175 + -angle) * Math.PI) / 180,
                                    endAngle: ((300 + -angle) * Math.PI) / 180,
                                },
                                style: {
                                    fill: "transparent",
                                    stroke: "rgb(1, 185, 250)",
                                    lineWidth: 2.6,
                                },
                                silent: true,
                            };
                        },
                        data: [0],
                    },
                    /** 绘制外部圆弧-1-开始圆点 <right-bottom> */
                    {
                        type: "custom",
                        coordinateSystem: "none",
                        renderItem: (params, api) => {
                            let x0 = api.getWidth() / 2;
                            let y0 = api.getHeight() / 2;
                            let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.82;
                            return {
                                type: "circle",
                                shape: {
                                    /** 角度355° 外弧1开始角度 */
                                    cx: x0 + r * Math.cos(((355 + -angle) * Math.PI) / 180),
                                    cy: y0 + r * Math.sin(((355 + -angle) * Math.PI) / 180),
                                    r: 4,
                                },
                                style: {
                                    fill: "rgb(1, 185, 250)",
                                    stroke: "rgb(1, 185, 250)",
                                },
                                silent: true,
                            };
                        },
                        data: [0],
                    },
                    /** 绘制外部圆弧-2-开始圆点 <left-top> */
                    {
                        type: "custom",
                        coordinateSystem: "none",
                        renderItem: (params, api) => {
                            let x0 = api.getWidth() / 2;
                            let y0 = api.getHeight() / 2;
                            let r = (Math.min(api.getWidth(), api.getHeight()) / 2) * 0.82;
                            return {
                                type: "circle",
                                shape: {
                                    /** 角度175° 外弧2开始角度 */
                                    cx: x0 + r * Math.cos(((175 + -angle) * Math.PI) / 180),
                                    cy: y0 + r * Math.sin(((175 + -angle) * Math.PI) / 180),
                                    r: 4,
                                },
                                style: {
                                    fill: "rgb(1, 185, 250)",
                                    stroke: "rgb(1, 185, 250)",
                                },
                                silent: true,
                            };
                        },
                        data: [0],
                    },
                    /** 刻度仪表盘 */

                    /** 饼图 */
                    {
                        name: "已完成",
                        type: "pie",
                        startAngle: 90,
                        z: 0,
                        label: {
                            position: "center",
                        },
                        radius: ["65%", "50%"],
                        silent: true,
                        animation: false, // 关闭饼图动画
                        data: [
                            {
                                value: dataValue,
                                itemStyle: {
                                    color: 'rgb(1, 185, 250)',
                                },
                            },
                            {
                                name: "未完成",
                                value: 100 - dataValue,
                                label: { show: false },
                                itemStyle: { color: "#00374C" },
                            },
                        ],
                    },
                ],
            };

            function draw() {
                angle = angle + 0.5;
                chart.setOption(option, true);
                requestAnimationFrame(draw)
            }

            draw()
            /**
             * 圆弧角度
              ◜    270°   ◝  
            180°    ↻      360°
              ◟    90°    ◞
             * 
            
             */


        }
    }
}
</script>

<style lang="less" scoped>
.chart-box {
    height: 900px;

    width: 340px;

    div {
        width: 100%;
        height: 25%;
    }
}
</style>